<template>
    <div>
        展示列表页面
    </div>
    <table>
        <thead>
            <tr>
                <th>名字</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.id">
                <th>{{ item.name }}</th>
                <th>{{ item.email }}</th>
                <th>
                    <button @click="toDetail(item)">详情</button>
                </th>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
// 导入数据内容
import { data } from './list.json';
import { useRouter } from 'vue-router';
const router = useRouter();

type Item = {
    id: number;
    name: string;
    age: number;
    email: string;
}

const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        // params为动态路由参数
        // query: item
        params: {
            id: item.id
        }
    })
}
</script>

<style scoped></style>